Vue.component("top",{
    template: `
    <el-header class="title">
        <div class="c900 flex">
                    <el-link :underline="false" href="index.html"><h1>电影售票平台</h1></el-link>
                    <nav>
                        <el-link href="index.html" class="center" :underline="false" style="background-color: #99f7">首页</el-link>
                        <el-link href="hots.html" class="center" :underline="false">热映电影</el-link>
                        <el-link class="center" :underline="false">电影院</el-link>
                        <el-link class="center" :underline="false">优惠活动</el-link>
                    </nav>
                    
                    <slot name="search">
                    <el-input style="width: auto" id="name" placeholder="请输入电影,影院,活动" v-model="search">
                        <el-button slot="append" icon="el-icon-search" @click="look"></el-button>
                    </el-input>
                    </slot>
                    
                    <div class="flex">
                        <sgin ref="a" style="display: flex;gap: 10px">-->
<!--                                                <template #logined="props">-->
                        <template #logined>
                            <el-avatar :src="$refs.a != null?$refs.a.myinfo.head:''"></el-avatar>
                            <el-link href="sgin/logout">退出</el-link>
                        </template>
                        <template #nologin>
                            <el-link href="register.html">注册</el-link>
                            <el-button type="text"@click="$refs.a.showForget=true">忘记密码</el-button>
                            <el-popover
                                    placement="top-start"
                                    title="打开手机端页面"
                                    width="200"
                                    trigger="hover">
                                <P><img src="/qrcode/mobile" @load="loadFn"></P>
                                <P>
                                    <h3>扫描登录</h3>
                                    <img id="clq" src="/qrcode/createLoginQrcode">
                                    <button onclick="clq.src ='/qrcode/createLoginQrcode?'+new Date().getTime()">重新获取二维码</button>
                                </P>

                                <el-link slot="reference" href="login.html">登录</el-link>
                            </el-popover>

                        </template>
                    </sgin>
                    </div>
                </div>
            </el-header>
    `,
    data(){
        return{
            search: '',
            ws:null
        }
    },
    methods:{
        look(){
            if(window.location.href.substring(window.location.href.lastIndexOf('/') + 1) != "index.html"){
                location.href = "index.html?name=" + this.search;
            }
        },
        loadFn() {
            axios.get("/qrcode/getLoginToken").then(res=>{
                console.log(res.data)
               if (res.data.code==1){
                   this.ws = new WebSocket("ws://127.0.0.1:8080/autoLogin/"+res.data.data);
                   console.log(res.data.data);
                   this.ws.onmessage = (e=>{
                       if (e.data=="OK"){
                           axios.get(`qrcode/autoLogin?token=${res.data.data}`).then(resp=>{
                               if(resp.data.code==1){
                                   this.$refs.a.myinfo = resp.data.data;
                                   console.log(resp.data.data);
                                   console.log(this.$refs.a.myinfo);
                               }
                           });
                       }
                   })
               }
            });
        }

    }
});